<div class="top-size-lg container has-footer">
    <div class="btn btn-default btn-sm text-back" style="display: inline-block;" ui-sref="{{beforeState1.name || 'app.rates.list'}}"><i class="glyphicon glyphicon-menu-left"></i>返回</div>
    <div>
        <div class="pull-left" style="width:50%;">
            <p style="padding-right: 5px;">
                <span>{{ rate[0].instrument }}</span>
                <i class="glyphicon glyphicon-info-sign" style="margin-left: 10px" ui-sref="app.rates.detail({ instrument:rate[0].instrument })"></i>
            </p>
            <div>
                <span>(</span>
                <div style="display:inline-block;width: 24px;height: 24px;text-align: center;">
                    <img ng-src="images/flags/{{ rate[0]._instrument.prefixIcon }}" alt=""
                         style="max-width: 24px; max-height: 24px;">
                </div>
                <span>/</span>
                <div style="display:inline-block;width: 24px;height: 24px;text-align: center;">
                    <img ng-src="images/flags/{{ rate[0]._instrument.suffixIcon }}" alt=""
                         style="max-width: 24px; max-height: 24px;">
                </div>
                <span>)</span>
            </div>
        </div>
        <div class="pull-right" style="width:50%;">
            <div class="text-right">
                <p class=""
                   ng-class="{ 'text-white':rate[0].lastBid==rate[0].bid,'text-red':rate[0].lastBid<rate[0].bid,'text-green':rate[0].lastBid>rate[0].bid }">
                    买入：{{ rate[0].bidShow }}
                </p>
                <p class=""
                   ng-class="{ 'text-white':rate[0].lastAsk==rate[0].ask,'text-red':rate[0].lastAsk<rate[0].ask,'text-green':rate[0].lastAsk>rate[0].ask }">
                    卖出：{{ rate[0].askShow }}
                </p>
                <p ng-if="rate[0].changeShow != '' || rate[0].percentShow != ''"
                     ng-class="{ 'text-white':rate[0].change==0,'text-green':rate[0].change<0,'text-red':rate[0].change>0 }">
                    <i ng-if="rate[0].change > 0" class="iconfont icon-up"></i>
                    <i ng-if="rate[0].change < 0" class="iconfont icon-down"></i>
                    <span>{{ rate[0].changeShow }}</span>
                    <span>({{ rate[0].percentShow }})</span>
                </p>
                <p class="font-12" style="padding: 0;">{{ rate[0].updated | date:'yyyy-MM-dd HH:mm:ss' }}</p>
            </div>
        </div>
        <i class="cl"></i>
    </div>
    <div style="height: 80px;border-bottom: 1px solid #e7e7e7;">
        <div class="col-xs-6" style="margin-top: 40px;">Sentiment</div>
        <div class="col-xs-6" style="margin-top: 15px;padding: 0;">
            <div>
                <span class="col-xs-6" style="display: inline-block;padding: 0;">Buying</span>
                <span class="col-xs-6" style="display: inline-block;padding: 0;text-align: right;">Selling</span>
            </div>
            <div class="text-center">
                <span class="col-xs-6"
                      style="color:#000;height:25px;line-height:25px;display: inline-block;background-color:#8BC34A;">50%</span>
                <span class="col-xs-6"
                      style="color:#000;height:25px;line-height:25px;display: inline-block;background-color:pink;">50%</span>
            </div>
        </div>
    </div>
    <div style="margin-top: 20px;">
        <div>日线K线图</div>
        <div id="main" style="width:100%;height:400px;border:1px solid #ccc;"></div>
    </div>
    <div style="margin-top: 20px;">
        <uib-tabset active="3">
            <uib-tab index="$index" ng-repeat="tab in tabs" heading="{{tab.title}}" select="getCandles(tab.key)"
                     disable="tab.disabled">
                {{tab.content}}
                <table border="1" width="100%" height="300px" style="border: 1px solid #ffffff;">
                    <tr style="background-color: #666;">
                        <td colspan="2">RSI(14)</td>
                        <td>55.263</td>
                        <td>Buy</td>
                    </tr>
                    <tr style="background-color: #666;">
                        <td colspan="2">STOCH(9,6)</td>
                        <td>40.909</td>
                        <td>Sell</td>
                    </tr>
                    <tr style="background-color: #666;">
                        <td colspan="2">STOCHRSI(14)</td>
                        <td>64.171</td>
                        <td>Buy</td>
                    </tr>
                    <tr>
                        <td colspan="2">MACD(12,26)</td>
                        <td>{{candle.macd}}</td>
                        <td>--</td>
                    </tr>
                    <tr>
                        <td colspan="3">MA(3)</td>
                        <td>{{candle.ma3}}</td>
                    </tr>
                    <tr>
                        <td colspan="3">MA(5)</td>
                        <td>{{candle.ma5}}</td>
                    </tr>
                    <tr>
                        <td colspan="3">MA(10)</td>
                        <td>{{candle.ma10}}</td>
                    </tr>
                    <tr>
                        <td colspan="3">MA(20)</td>
                        <td>{{candle.ma20}}</td>
                    </tr>
                    <tr>
                        <td colspan="3">MA(30)</td>
                        <td>{{candle.ma30}}</td>
                    </tr>
                    <tr>
                        <td colspan="3">MA(60)</td>
                        <td>{{candle.ma60}}</td>
                    </tr>
                </table>
            </uib-tab>
        </uib-tabset>
    </div>
</div>